<!-- 首页-我的 -->
<script setup>

import { reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getUserInfoApi, getWalletApi } from '@/api/user.js';

import { getBasicRulesApi } from '@/api/shop.js'
import { numberUnify } from '@/utils'
// 数据
const info = reactive({
  barHeight: 0,
  navHeight: 0,
  userId: '',
  walletBalance: '',
  msgNum: 0,
  userInfo: {},
  showExplainPopup: false,
  vipExplain: ``
})
// 获取手机状态栏高度
onLoad(() => {
  //获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
  let { statusBarHeight } = uni.getSystemInfoSync()
  info.barHeight = statusBarHeight
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  info.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
})
onShow(() => {
  info.userId = uni.getStorageSync('userId');
  getBasicRules()
  // console.log('userId', typeof userId)
  if (info.userId !== '') {
    getUserInfo()
  }
})
// 获取会员规则
function getBasicRules() {
  getBasicRulesApi({
    id: 2
  })
    .then(res => {
      const data = res.data
      info.vipExplain = data.settingContent
    })
}
// 获取用户信息
function getUserInfo() {
  getUserInfoApi({})
    .then(res => {
      info.userInfo = res.data
      if (info.userInfo.level) {
        getWallet()
      }
      // console.log('userInfo', info.userInfo)
    })
}
// 获取用户vip钱包信息
function getWallet() {
  getWalletApi({})
    .then(res => {
      info.walletBalance = numberUnify(res.data.balance / 100)
    })
}
// 前往登录页面
function goLoginPage() {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}
// 前往消息通知页面
function goMessagePage() {
  checkLogin()
  uni.navigateTo({
    url: '/subPackage/my/message/index'
  })
}
// 前往个人信息页面
function goInfoPage() {
  checkLogin()
  uni.navigateTo({
    url: '/subPackage/my/info/index'
  })
}
// 前往充值页面
function goRechargePage() {
  checkLogin()
  uni.navigateTo({
    url: '/subPackage/my/member/index'
  })
}

// 前往优惠券页面
function goCouponPage() {
  checkLogin()
  uni.navigateTo({
    url: '/subPackage/my/coupon/index'
  })
}

// 前往我的物品页面
function goGoodsPage() {
  checkLogin()
  uni.navigateTo({
    url: '/subPackage/my/goods/index'
  })
}

// 订单状态列表
const orderStatusList = [
  {
    name: '待付款',
    type: 1,
    icon: '1',
    url: '/pages/order/list?type=1'
  },
  {
    name: '待发货',
    type: 3,
    icon: '2',
    url: '/pages/order/list?type=2'
  },
  {
    name: '待提货',
    type: 2,
    icon: '3',
    url: '/pages/order/list?type=3'
  },
  {
    name: '待收货',
    type: 4,
    icon: '4',
    url: '/pages/order/list?type=4'
  },
  {
    name: '售后/退款',

    type: 6,
    icon: '5',
    url: '/pages/order/list?type=5'
  }
]

// 前往订单列表页面
function goOrderList(type) {
  checkLogin()
  uni.navigateTo({
    url: '/subPackage/my/order/index?type=' + type
  })
}

// 拨打客服电话
function callCustomerService() {
  uni.makePhoneCall({
    phoneNumber: '114' //仅为示例
  }).catch(e => { })
}
// 校验是否用户已登录
const checkLogin = () => {
  if (info.userId === '') {
    goLoginPage()
    return false
  }
}
</script>

<template>
  <view class="my-page">
    <!-- 头部信息 -->
    <view class="head-box">
      <!-- 背景图 -->
      <view class="head-bg">
        <image src="/static/images/my_bg.png" mode="widthFit" />
      </view>
      <!-- 内容区域 -->
      <view class="content-box" :style="{ 'padding-top': info.barHeight + 'px' }">
        <!-- 导航栏 -->
        <view class="navbar" :style="{ 'height': info.navHeight + 'px' }">
          <view class="message-box" @click="goMessagePage">
            <up-badge :type="'error'" max="99" :value="info.msgNum" :absolute="true" :offset="[-5, -5]"></up-badge>
            <image src="/static/images/icons/message.png" mode="scaleToFill" style="width: 48rpx; height: 48rpx;" />
          </view>
        </view>
        <!-- 个人信息 -->
        <view class="user-info-box">
          <!-- 未登录 -->
          <view v-if="info.userId === ''" class="not-login" @click="goLoginPage">
            <up-avatar :src="info.userInfo.avatar || `/static/images/default_avatar.png`"></up-avatar>
            <text class="login-btn">点击登录</text>
          </view>
          <!-- 已经登陆 -->
          <view v-else class="is-login" @click="goInfoPage">
            <up-avatar :src="info.userInfo.avatar || `/static/images/default_avatar.png`"></up-avatar>
            <text class=" name">{{ info.userInfo.nickname }}</text>
            <image style="width: 40rpx; height: 40rpx;" src="/static/images/icons/info_edit.png" mode="scaleToFill" />
          </view>
        </view>
      </view>

      <!-- 会员信息 -->
      <view class="vip-info-box">
        <!-- 会员背景 -->
        <view class="vip-info-bg-box">
          <image style="width: 666rpx; height: 234rpx;" src="/static/images/my_vip_bg.png" mode="scaleToFill" />
        </view>
        <!-- 会员信息内容  -->
        <view class="vip-info-content">
          <view class="explain-box">
            <view class="left">
              <text>会员充值优惠多多，享受无限好水</text>
            </view>
            <view class="right" @click="info.showExplainPopup = true">
              <up-icon name="error-circle" color="#724613" size="24rpx"></up-icon>
              <text>说明</text>
            </view>
          </view>
          <!-- 会员卡名称 -->
          <view class="vip-card-name">
            <image style="width: 240rpx; height: 48rpx;" src="/static/images/my_vip_name.png" mode="scaleToFill" />
          </view>
          <!-- 会员卡 详情信息 -->
          <view class="vip-card-info">
            <view class="amount-box">
              <text>￥ {{ info.walletBalance || '0.00' }}</text>
            </view>
            <!-- 按钮 -->
            <view class="btn-box">
              <view class="btn" @click="goRechargePage">
                <text>{{ info.userInfo.level ? `充值` : `立即开通` }}</text>
                <up-icon name="arrow-right"></up-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 订单模块 -->
    <view class="order-box">
      <view class="head">
        <text class="title">我的订单</text>
        <image @click="goOrderList(0)" style="width: 30rpx; height: 30rpx;" src="/static/images/icons/order_right.png"
          mode="scaleToFill" />
      </view>
      <up-grid :border="false" :align="`center`" :col="5">
        <up-grid-item v-for="(item, i) in orderStatusList" :key="i" @click="goOrderList(item.type)">
          <image style="width: 80rpx; height: 80rpx;" :src="`/static/images/icons/order_status${item.icon}.png`"
            mode="scaleToFill" />
          <text class="grid-text">{{ item.name }}</text>
        </up-grid-item>
      </up-grid>
    </view>
    <!-- 优惠券和我的物品（奖品）入口 -->
    <view class="other-block">
      <!-- 优惠券 -->
      <view class="item coupon-box" @click="goCouponPage">
        <view class="bg coupon-entrance-bg">
          <image style="width: 330rpx; height: 138rpx;" src="/static/images/coupon_entrance_bg.png"
            mode="scaleToFill" />
        </view>
        <view class="cnt">
          <view class="title">
            <text>优惠券</text>
          </view>
          <view class="entrance">
            <text>领取专属优惠券</text>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>
      </view>
      <!-- 我的物品（奖品） -->
      <view class="item prize-box" @click="goGoodsPage">
        <view class="bg prize-entrance-bg">
          <image style="width: 330rpx; height: 138rpx;" src="/static/images/prize_entrance_bg.png" mode="scaleToFill" />
        </view>
        <view class="cnt">
          <view class="title">
            <text>我的物品</text>
          </view>
          <view class="entrance">
            <text>精美奖品快去领取</text>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>
      </view>
    </view>
    <!-- 其他 模块入口 -->
    <view class="other-entrance">
      <up-cell-group :border="false">
        <up-cell :isLink="true" :border="false" url="/subPackage/my/address/index">
          <template #icon>
            <image style="width: 56rpx; height: 56rpx;" src="/static/images/icons/address.png" mode="scaleToFill" />
          </template>
          <template #title>
            <text class="name">收货地址</text>
          </template>
        </up-cell>
        <up-cell :isLink="true" :border="false" @click="callCustomerService">
          <template #icon>
            <image style="width: 56rpx; height: 56rpx;" src="/static/images/icons/customer_service.png"
              mode="scaleToFill" />
          </template>
          <template #title>
            <text class="name">客服热线</text>
          </template>
        </up-cell>
        <up-cell :isLink="true" :border="false" url="/subPackage/my/agreement/index">
          <template #icon>
            <image style="width: 56rpx; height: 56rpx;" src="/static/images/icons/agreement.png" mode="scaleToFill" />
          </template>
          <template #title>
            <text class="name">用户协议、隐私政策</text>
          </template>
        </up-cell>
      </up-cell-group>
    </view>
    <!-- 弹窗-查看会员说明 -->
    <up-modal :show="info.showExplainPopup" title="规则说明">
      <view class="vip-explain-popup-content">
        <rich-text :nodes="info.vipExplain"></rich-text>
      </view>
      <template #confirmButton>
        <u-button type="primary" size="large" :customStyle="{
          background: '#FFA618',
          borderRadius: '112rpx 112rpx 112rpx 112rpx',
          fontWeight: '500',
          fontSize: '32rpx',
          border: 'none',
          color: '#FFFFFF',
        }" @click="info.showExplainPopup = false">我知道了</u-button>
      </template>
    </up-modal>
  </view>
</template>

<style lang="scss" scoped>
.my-page {

  // 头部
  &>.head-box {
    position: relative;
    width: 100vw;
    height: 572rpx;

    // 头部背景
    & .head-bg {
      position: absolute;
      z-index: 1;
      width: 100vw;
      height: 572rpx;

      &>image {
        width: 100vw;
        height: 572rpx;
      }
    }

    // 头部内容
    & .content-box {
      position: relative;
      z-index: 2;

      // navbar
      &>.navbar {
        display: flex;
        align-items: center;

        & .message-box {
          position: relative;
          margin-left: 32rpx;
          width: 48rpx;
          height: 48rpx;
          background-color: #000;

          &::v-deep .u-badge {
            height: 20rpx;
            line-height: 16rpx !important;
            font-size: 18rpx !important;
          }
        }
      }

      // 个人信息
      & .user-info-box {
        display: flex;
        align-items: center;
        margin-top: 28rpx;
        margin-left: 30rpx;

        &::v-deep .up-avatar {
          width: 100rpx !important;
          height: 100rpx !important;
        }

        // 未登录
        & .not-login {
          display: flex;
          align-items: center;

          & .login-btn {
            position: relative;
            padding-left: 24rpx;
            font-weight: 500;
            font-size: 36rpx;
            color: #FFFFFF;

            &::after {
              content: '';
              position: absolute;
              bottom: -2rpx;
              left: 24rpx;
              width: 144rpx;
              height: 4rpx;
              background-color: #fff;
            }
          }
        }

        //已登录
        & .is-login {
          display: flex;
          align-items: center;

          & .name {
            padding-left: 24rpx;
            font-weight: 500;
            font-size: 36rpx;
            color: #FFFFFF;
          }

          & image {
            margin-left: 24rpx;
          }
        }
      }
    }

    // 会员信息
    & .vip-info-box {
      position: absolute;
      bottom: -2rpx;
      margin: 0 42rpx;
      height: 234rpx;
      width: calc(100vw - 84rpx);

      // 会员背景
      & .vip-info-bg-box {
        position: absolute;
        z-index: 2;
        height: 234rpx;

        &>image {
          width: 100%;
          height: 234rpx;
        }
      }

      // 会员信息内容
      & .vip-info-content {
        position: relative;
        z-index: 3;

        // 会员信息说明
        & .explain-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 28rpx;

          & .left {
            margin-left: 28rpx;
            font-weight: 400;
            font-size: 17rpx;
            color: #724613;
          }

          & .right {
            display: flex;
            align-items: center;
            margin-right: 12rpx;

            &::v-deep .u-icon {
              margin-top: 4rpx;
            }

            & text {
              margin-left: 6rpx;
              font-weight: 400;
              font-size: 18rpx;
              color: #724613;
            }
          }
        }

        // 会员卡名称
        & .vip-card-name {
          margin-top: 38rpx;
          margin-left: 30rpx;
        }

        // 会员卡 详情信息
        & .vip-card-info {
          display: flex;
          align-items: center;
          margin-top: 26rpx;
          margin-left: 28rpx;

          & .amount-box {
            & text {
              font-weight: bold;
              font-size: 31rpx;
              background: linear-gradient(31.456819593938487deg, #472614 0%, #FFA76E 100%);
              color: transparent;
              background-clip: text;
            }
          }

          & .btn-box {
            margin-left: 16rpx;

            & .btn {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 0 14rpx;
              height: 36rpx;
              border-radius: 184rpx 184rpx 184rpx 184rpx;
              border: 2rpx solid #724613;

              & text {
                font-weight: 500;
                font-size: 17rpx;
                color: #724613;
              }

              &::v-deep .u-icon text {
                font-size: 17rpx !important;
              }
            }
          }
        }
      }
    }
  }

  // 订单模块
  & .order-box {
    margin-top: 52rpx;
    padding: 0 32rpx;

    // 订单头部
    & .head {
      display: flex;
      align-items: center;
      justify-content: space-between;

      & .title {
        font-weight: 500;
        font-size: 28rpx;
        color: #242532;
      }
    }

    //状态列表
    &::v-deep .u-grid {
      margin-top: 20rpx;

      & .grid-text {
        margin-top: 6rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #242532;
      }
    }
  }

  // 优惠券和我的物品（奖品）入口
  & .other-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 38rpx;
    padding: 0 38rpx;

    & .item {
      position: relative;
      width: 330rpx;
      height: 138rpx;

      & .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 330rpx;
        height: 138rpx;
      }

      & .cnt {
        position: relative;
        padding: 24rpx;

        & .title {
          font-weight: 600;
          font-size: 28rpx;
          color: #242532;
        }

        & .entrance {
          display: flex;
          align-items: center;
          margin-top: 12rpx;

          & text {
            font-weight: 400;
            font-size: 20rpx;
            color: #868791;
          }

          &::v-deep .u-icon {
            margin-left: 6rpx;

            & text {
              font-size: 20rpx !important;
              color: #868791 !important;
            }
          }
        }
      }
    }
  }

  // 其他模块入口 （地址，客服热线，协议）
  & .other-entrance {
    margin-top: 52rpx;

    & .name {
      font-weight: 500;
      font-size: 28rpx;
      color: #242532;
    }
  }

  // 会员说明弹窗
  &::v-deep .u-popup {
    & .vip-explain-popup-content {
      & rich-text {
        font-weight: 400;
        font-size: 28rpx;
        color: #303133;
      }
    }
  }
}
</style>